<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="onRefresh"></u-search>
            </view>
        </view>

        <scroll-view 
            v-if="Productlist.length > 0"
            class="list" 
            :scroll-y="true" 
            :scroll-top="top"
            :refresher-triggered="refresh" 
            :refresher-enabled="true" 
            :lower-threshold="100"
            @refresherrefresh="onRefresh" 
            @scrolltolower="scrollTolower"
            @scroll="OnScroll"
            :style="{height:`${height}px`}"
        >
            <navigator :url="`/pages/validate/info?code=${item.query_code}`" v-for="(item,key) in Productlist" :key="key"  class="item" >
                <view class="title">{{item.products.name}}</view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">{{ item.query_num }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value">{{ item.query_code }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">{{ item.query_time_text }}</view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
            </navigator>

            <!-- 里面的属性是底部没有更多那里的 -->
            <u-loadmore :status="status" marginBottom="40" fontSize="15" lineColor="#1CD29B" dashed line />

        </scroll-view>

        <!-- 提醒组件 -->
        <u-toast ref="notice"></u-toast>

        <!-- 返回顶部 -->
        <u-back-top :scroll-top="top" @click="top = 0"></u-back-top>
    </view>
</template>
<script>
export default{
    onShow()
    {
        //拿到本地存储
        this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

        //判断是否有登录
        if(Object.keys(this.business).length > 0)
        {
            //有登录
            this.onRefresh()
        }else
        {
            //没有登录
        }
    },
    onReady()
    {
        //调用uni接口 获取页面的高度
        uni.getSystemInfo({
            success: (res) => {
                this.height = res.windowHeight
            }
        })
    },
    
    data() {
        return {
            refresh:false,// 下拉刷新状态
            finished:false,// 上拉加载状态
            Isfreshing:false,// 防止重复刷新
            Productlist:[],
            page:1,
            limit:10,
            business:{},
            status:'loadmore',
            keyword:'',
            height:0,//页面高度
            top:0,

        }
    },
    methods:{
        // search()
        // {
        //     this.onRefresh()
        // },
        onRefresh() //下拉刷新
        {

            // console.log(123)
            //下拉刷新
            //防止重复下拉刷新
            if(this.Isfreshing) return;

            //执行一次下拉刷新
            this.Isfreshing = true;

            //判断是否处于下刷新中
            if(!this.refresh) this.refresh = true;//正在下拉刷新
            this.page = 1;
            this.Productlist = [];

            //请求列表
            this.ProductData()

        },
        OnScroll(e) //滚动改变top值
        {
            this.top = e.detail.scrollTop;
        },
        scrollTolower() //上拉加载
        {
            //请求列表
            this.ProductData()
        },
        async ProductData()
        {
            // 拿到busid
            var busid = this.business.id ? this.business.id : 0

            var params = {
                busid,
                page:this.page,
                keyword:this.keyword,
                limit:this.limit,
            }
            var result = await uni.$u.http.post('/business/productinfo', params)

            if(this.refresh)
            {
                this.refresh = false
            }

            if(this.Isfreshing)
            {
                this.Isfreshing = false
            }

            this.status = 'loadmore'

            if(result.code == 0)
            {
                //没有更多数据
                this.status = 'nomore';
                return false
            }

            this.Productlist = this.Productlist.concat(result.data)
            this.page++
            // console.log(result)
        }
        
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>